<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	#wuyanzu{
		position: absolute;
		top: 0;
		left: 0;
		width: 350px;
		height: 262px;
		border: 1px solid blue;
		background: url(wuyanzu.jpg) no-repeat;
	}
</style>
<script type="text/javascript">
	window.onload = function(){
		var wuyanzu = document.getElementById('wuyanzu');//抓到吴彦祖
		// 获得可视区域的宽高
		var w_height = document.documentElement.clientHeight;
		var w_width = document.documentElement.clientWidth;

		// 获得图片的宽高
		var img_height = wuyanzu.offsetHeight;
		var img_width = wuyanzu.offsetWidth;

		// 获得最大的top和left值
		var max_top = w_height - img_height;
		var max_left = w_width - img_width;

		var x=1,y=1;
		// 设置定时器，用来控制图片的移动
		var timer = setInterval(autoRun,3);

		function autoRun(){
			// 获得元素旧的top和left值
			var old_top = wuyanzu.offsetTop;
			var old_left = wuyanzu.offsetLeft;

			// 计算新的left和top值
			var new_top = old_top+x;
			var new_left = old_left+y;

			// 将新值赋值回去
			wuyanzu.style.left = new_left+'px';
			wuyanzu.style.top = new_top+'px';

			// 判断是否应该变换运动方向
			if(new_top==max_top || new_top==0){
				x = x*-1;//翻转x的值
			}

			if(new_left==0 || new_left==max_left){
				y = y*-1;
			}
			
		}

		// 给漂浮元素加鼠标移入效果，鼠标移入进来，就停掉
		wuyanzu.onmouseover = function(){
			clearInterval(timer);//清理定时器
		}

		// 关闭按钮效果
		document.getElementById('close').onclick = function(){
			wuyanzu.style.display = 'none';
		}

		wuyanzu.onmouseout = function(){
			timer = setInterval(autoRun,3);
		}
	}
</script>
</head>

<body>

<div id="wuyanzu">
	<img src="close.jpg" id="close" />
</div>


</body>
</html>
